<template>
  <div>
    <div v-if="!disabled" style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor
        :style="{
          height: height ? `${height}px` : '500px',
          'overflow-y': 'hidden'
        }"
        v-model="content"
        :defaultConfig="editorConfig"
        :mode="mode"
        @on-created="onCreated"
        @on-change="
          (editor) => {
            change(editor);
          }
        "
        @on-focus="
          (editor) => {
            focus(editor);
          }
        "
        @on-blur="
          (editor) => {
            blur(editor);
          }
        "
      />
    </div>
    <div v-else v-html="content"></div>
  </div>
</template>

<script>
import defaultSettings from '@/settings';
import { getToken } from '@/utils/auth';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { getZfsUploadTrans } from '../../utils/common-methods';

export default {
  name: 'VueQuillEditor',
  components: { Editor, Toolbar },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 0
    },
    focus: {
      type: Function,
      default: () => {}
    },
    blur: {
      type: Function,
      default: () => {}
    },
    change: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...', MENU_CONF: {} },
      mode: 'default', // or 'simple'
      content: ''
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.content = newVal;
      },
      immediate: true
    },
    content: {
      handler(newVal, oldVal) {
        this.$emit('update:modelValue', newVal);
      },
      immediate: true
    },
    disabled: {
      handler() {},
      immediate: true
    }
  },
  created() {
    this.imgUploadInit();
  },
  mounted() {},
  beforeUnmount() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    imgUploadInit() {
      this.editorConfig.MENU_CONF['uploadImage'] = {
        fieldName: 'file',
        maxFileSize: 50 * 1024 * 1024, // 图片大小限制50M
        server: import.meta.env.VITE_APP_BASE_API + '/zfs/upload',
        headers: {
          [defaultSettings.tokenName]: 'Bearer ' + getToken()
        },
        customInsert(res, insertFn) {
          const { data } = res;
          const fileObj = getZfsUploadTrans(data);
          const { fileName, url, type } = fileObj;
          // 从 res 中找到 url alt href ，然后插入图片
          insertFn(url, fileName, url);
        }
      };

      this.editorConfig.height = '300px';
    },
    getHtml() {
      return this.editor.getHtml();
    }
  }
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
